<template>
  <h1 class="form">
    <el-table :data="tableData" style="width: 100%" border :row-style="{height: '50px'}">
       <el-table-column label="序号" width="60">
          <template #default="scope">
             {{ scope.$index + 1 }}
          </template>
       </el-table-column>
      <!-- 使用 v-for 遍历 propKArr 来动态生成列 -->
      <el-table-column
          v-for="(value, key) in propKArr"
          :key="key"
          :prop="key"
          :label="value">
      </el-table-column>
<!--      其他操作的界面插槽-->
      <slot></slot>
    </el-table>
  </h1>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  labelArr: Array,
  tableData: Array
})
console.log("labelArr",props.labelArr)
console.log("tableData",props.tableData)
// 使用 computed 来确保 propKArr 总是基于 labelArr 的最新值
const propKArr = computed(() => props.labelArr.reduce((acc, label) => {
  const key = Object.keys(label)[0];
  acc[key] = label[key];
  return acc;
}, {}))

</script>

<style scoped>
.form {
  clear: both;
  margin-top: 40px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>